<template>
  <div class="c-test">
    <el-button>element ui的按钮</el-button>
    <div class="c-test__header--large">这是个示例页面 <span class="c-test__more"></span></div>
    <div class="c-test__header">这是标题</div>
    <div class="c-test__content--long">这是一长串文字：发动机卡卡来决定是否垃圾离开房间啦</div>
    <p class="c-test__desc">这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容这是段落内容</p>
    <!-- @slot 默认插槽 -->
    <slot></slot>
    <!-- @slot body插槽 -->
    <slot name="body"></slot>
  </div>
</template>

<script>
/**
 * 这是HelloWorld组件
 * @author pan <sd4015700@126.com>
 * @since 2021-07-10
 *
 * @example ./Other.md
 */
export default {
  name: 'HelloWorld',
  props: {
    /**
     * 名称
     */
    name: {
      type: String
    },
    /**
     * 是否显示模态框
     */
    showModal: {
      type: Boolean,
      default: false
    },
    /**
     * 尺寸
     * @values small, large, middle
     */
    size: {
      type: String,
      default: 'small'
    }
  },
  methods: {
    /**
     * 测试
     * @example
     * return 2 test(1)
     * @param a 数字
     * @public
     */
    test(a) {
      console.log(a)
    },
    other() {
      /**
       * @param a 数组
       */
      this.$emit('good', 1)
    }
  }
}
</script>

<style scoped lang="scss">
@include b(c-test) {
  background: #f3f3f3;
  @include e(more) {
    @include caret(relative, 20px, 3px, bottom, green, pink);
  }
  @include e(header) {
    font-size: 14px;
    color: green;
    &:hover {
      color: red;
      cursor: pointer;
    }
    @include m(large) {
      font-size: 18px;
    }
  }
  @include e(content) {
    @include m(long) {
      @include ellipsis(1, 90px);
    }
  }
}
</style>
